// createRouter 用来创建路由对象用的

/*
  路由模式：
  1. createWebHistory 路由模式(History)
    History： 前面用的是 / 开头，一般是要配合后端进行使用的，容易产生 404 页面
              路径比较美观
  2. createWebHashHistory 路由模式(Hash)
    Hash： 前面用的是 # 开头，无需后端配合使用，兼容性会略好

*/
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
// 导入 home 组件
// import HomeView from '../views/HomeView.vue'

// 关于管理员的导入
import MangerIndexView from '../views/manager/MangerIndexView.vue'
import MangerListView from '../views/manager/MangerListView.vue'
import UserListView from '../views/manager/UserListView.vue'

// 导入轮播图的组件
import BannerIndexView from '../views/banner/BannerIndexView.vue'
import BannerListView from '../views/banner/BannerListView.vue'
import AddBannerView from '../views/banner/AddBannerView.vue'

// 导入商品管理的组件
// 选中内容然后按住 alt 键继续选其他内容即可
import ProIndexView from '../views/pro/ProIndexView.vue'
import ProListView from '../views/pro/ProListView.vue'
import AddProView from '../views/pro/AddProView.vue'

// 导入图表管理的组件
import EChartsIndexView from '../views/echarts/EChartsIndexView.vue'
import EChartsShowView from '../views/echarts/EChartsShowView.vue'
import EChartsView from '../views/echarts/EChartsView.vue'


// excel 管理
import ExcelIndexView from '../views/excel/ExcelIndexView.vue'
import ExcelExportView from '../views/excel/ExcelExportView.vue'
import ExcelImportView from '../views/excel/ExcelImportView.vue'

// 富文本管理
import EditorIndexView from '../views/editor/EditorIndexView.vue'
import EditorShowView from '../views/editor/EditorShowView.vue'

// 地图管理
import MapIndexView from '../views/map/MapIndexView.vue'
import MapShowView from '../views/map/MapShowView.vue'

// 路由规则配置
export const routes = [
  {
    // 访问时的路由路径，用来跳转页面用的
    path: '/',
    // 命名路由，路由的别名，也可以用来跳转页面
    name: 'home',
    // 当访问到对应的路由路径后需要展示的组件页面
    component: () => import('../views/HomeView.vue'),
    label: '首页',
    icon: 'HomeFilled',
    // children 是用来配置子路由用的，二级路由
    children: [
      {
        // 配置二级路由的时候前面不需要加 /
        path: 'manager',
        name: 'manager',
        label: '账号管理',
        icon: 'User',
        component: MangerIndexView,
        // 是用来配置三级路由的
        children: [
          {
            path: 'managerlist',
            name: 'managerlist',
            label: '管理员列表',
            component: MangerListView
          }, {
            path: 'userlist',
            name: 'userlist',
            label: '用户列表',
            component: UserListView
          }
        ]
      }, {
        path: 'banner',
        name: 'banner',
        label: '轮播图管理',
        icon: 'Picture',
        component: BannerIndexView,
        children: [
          {
            path: 'bannerlist',
            name: 'bannerlist',
            label: '轮播图列表',
            component: BannerListView
          }, {
            path: 'addbanner',
            name: 'addbanner',
            label: '添加轮播图',
            component: AddBannerView
          }
        ]
      }, {
        path: 'pro',
        name: 'pro',
        label: '商品管理',
        icon: 'Operation',
        component: ProIndexView,
        children: [
          {
            path: 'prolist',
            name: 'prolist',
            label: '商品列表',
            component: ProListView
          }, {
            path: 'addpro',
            name: 'addpro',
            label: '添加商品',
            component: AddProView
          }
        ]
      }, {
        path: 'echarts',
        name: 'echarts',
        label: '图表管理',
        icon: 'DataLine',
        component: EChartsIndexView,
        children: [
          {
            path: 'echartsshow',
            name: 'echartsshow',
            label: '图表显示',
            component: EChartsShowView
          },
          {
            path: 'myecharts',
            name: 'myecharts',
            label: '显示图表',
            component: EChartsView
          }
        ]
      },
      {
        path: 'excel',
        name: 'excel',
        label: 'excel 管理',
        icon: 'Document',
        component: ExcelIndexView,
        children: [
          {
            path: 'excelimport',
            name: 'excelimport',
            label: 'excel 导入',
            component: ExcelImportView
          },
          {
            path: 'excelexport',
            name: 'excelexport',
            label: 'excel 导出',
            component: ExcelExportView
          }
        ]
      }, {
        path: 'editor',
        name: 'editor',
        label: '富文本编辑器',
        icon: 'Brush',
        component: EditorIndexView,
        children: [
          {
            path: 'editorshow',
            name: 'editorshow',
            label: '编辑器',
            component: EditorShowView
          }
        ]
      }, {
        path: 'map',
        name: 'map',
        label: '地图管理',
        icon: 'MapLocation',
        component: MapIndexView,
        children: [
          {
            path: 'mapshow',
            name: 'mapshow',
            label: '百度地图',
            component: MapShowView
          }
        ]
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    // route level code- splitting
    //   this generates a separate chunk(About.[hash].js) for this route
    //   which is lazy - loaded when the route is visited.
    //   路由懒加载，需要的时候在来加载
    // 对于一些不确定是否立即需要展示的页面，我们可以使用懒加载
    component: () => import('../views/LoginView.vue')
  }
]

// 创建路由实例
const router = createRouter({
  // 配置路由模式，可以通过切换 createWebHashHistory 方法进行配置
  history: createWebHashHistory(import.meta.env.BASE_URL),
  // 配置路由规则
  routes
})



// 导出路由
export default router
